<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn">点我有惊喜</button>
<button id="btn2">点我有重大惊喜</button>
<button id="btn3">点我有超级重大惊喜</button>

</body>
<script>
    document.getElementById("btn").onclick = function () {
        alert("[立即弹框]七夕快乐！！！" + this.innerText);
        // 延迟 3 秒之后，再弹出警告框
        // 参数 1：以函数的形式封装要执行的操作
        // 参数 2：延迟执行参数 1 那个函数的时间
        setTimeout(function () {
            // 问题现象：this.innerText 打印出来是 undefined，不是我们想要的值
            // 问题分析：this 指向调用当前函数的对象，当前函数是谁？是给 setTimeout() 函数传入的第一个参数
            // “参数 1 函数”和“单击响应函数”是两个不同的函数，它们各自内部的 this 指向不同的对象
            // “参数 1 函数”中的 this 指向 Window 对象
            // “单击响应函数”中的 this 指向点击的按钮的元素对象
            alert("[延迟弹框]七夕快乐！！！" + this.innerText);
        }, 3000);
    }

    // 能够解决问题，但是不够优雅
    document.getElementById("btn2").onclick = function () {
        // 声明变量接收 this 指向的对象
        let btnEle = this;

        // 执行其它操作
        setTimeout(function () {
            alert("[延迟弹框]七夕快乐！！！" + btnEle.innerText + "[改进版]");
        }, 3000);
    }

    // 使用箭头函数，既能解决问题，又能让代码优雅
    document.getElementById("btn3").onclick = function (){
        setTimeout(()=>{
            // 箭头函数没有自己的 this，在箭头函数中 this 和外面的的 this 指向的对象一样
            alert("[延迟弹框]七夕快乐！！！" + this.innerText + "[箭头函数版]");
        }, 3000);
    };
</script>
</html>